<script setup lang="ts">
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue'
interface TestCase {
    input: string
    output: string
}

const test_cases = defineModel<TestCase[]>('test_cases', { default: () => [] })

const addCase = () => {
    test_cases.value = [
        ...test_cases.value,
        { input: '', output: '' }
    ]
}
const popCase = () => {
    test_cases.value = test_cases.value.slice(0, -1)
}
</script>

<template>
    <div style="width: 100%; overflow-x: hidden; overflow-y: scroll; max-height: 680px">
        <div v-for="(item, index) in test_cases" :key="index">
            <a-textarea v-model:value="item.input" placeholder="输入数据" auto-size />
            <a-textarea v-model:value="item.output" disabled auto-size></a-textarea>
        </div>
        <a-button size="small" @click="addCase">
            <template #icon>
                <PlusOutlined />
            </template>
            {{ '添加测试用例' }}
        </a-button>
        <a-button size="small" @click="popCase">
            <template #icon>
                <MinusOutlined />
            </template>
            {{ '删除最后一个测试用例' }}
        </a-button>
    </div>
</template>

<style scoped>
:deep(.ant-input) {
    border-radius: 0;
    width: 100%;
}
</style>